<!DOCTYPE html>
<meta name="monetization" content="$coil.xrptipbot.com/3lcUCVS5Rm-e6Ch_O7vpQA">
<meta charset="utf8">
<meta name="viewport" content="width=device-width, user-scalable=0">
<title>Backcountry</title>
<style>
    html, body {
        overflow: hidden;
        margin: 0;
    }
    canvas, main {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        user-select: none;
        color: #ffe8c6;
        font: 15vmin Impact;
    }
    a, [onclick] {
        cursor: pointer;
        color: #ffe8c6
    }
    a:hover, [onclick]:hover {
        color: #fff;
    }

    #debug {
        display: flex;
        flex-flow: column nowrap;
        align-items: flex-end;
        position: absolute;
        top: 0;
        right: 0;
        color: #fff;
        font-family: monospace;
    }
    #debug button {
        padding: 0;
        background: none;
        border: none;
        font: inherit;
        color: inherit;
    }
    #debug div {
        width: max-content;
        background: #000;
        color: #fff;
    }
</style>
<body>
    <canvas></canvas>
    <canvas></canvas>
    <main></main>
    <div id="debug">
        <div>cpu: <span id="cpu"></span></div>
        <div>gpu: <span id="gpu"></span></div>
        <div>fps: <span id="fps"></span></div>
        <div><button onclick="toggle(this)">pause</button></div>
    </div>
    <script type="module">
        import "./js/index.js";

        let running = true;
        window.toggle = function toggle(button) {
            if (running) {
                running = false;
                window.game.Stop();
                button.textContent = "resume";
            } else {
                running = true;
                window.game.Start();
                button.textContent = "pause";
            }
        };
    </script>
</body>
